<template>
  <Modal :value="getJackBeanShowModal" title="杰克魔豆" width="970" height="580" @on-ok="onCancel" @on-cancel="onCancel">
    <div class="img_h_style">
      <div class="img_v_style">
        <canvas width="180" height="180"/>
        <img v-bind:src="img1" width="180" height="180"/>
        <img v-bind:src="img2" width="180" height="180"/>
        <img v-bind:src="img3" width="180" height="180"/>
        <canvas width="180" height="180"/>
      </div>
      <div class="img_v_style">
          <img v-bind:src="img4" width="180" height="180"/>
          <img v-bind:src="img5" width="180" height="180"/>
          <img v-bind:src="img6" width="180" height="180"/>
          <img v-bind:src="img7" width="180" height="180"/>
          <img v-bind:src="img8" width="180"  height="180"/>
      </div>
      <div  class="img_v_style">
          <img v-bind:src="img9" width="180" height="180"/>
          <img v-bind:src="img10" width="180" height="180"/>
          <img v-bind:src="img11" width="180" height="180"/>
          <img v-bind:src="img12" width="180" height="180"/>
          <img v-bind:src="img13" width="180" height="180"/>
      </div>
      <div  class="img_v_style">
          <img v-bind:src="img14" width="180" height="180"/>
          <img v-bind:src="img15" width="180" height="180"/>
          <img v-bind:src="img16" width="180" height="180"/>
          <img v-bind:src="img17" width="180" height="180"/>
          <img v-bind:src="img18" width="180" height="180"/>
      </div>
      <div class="img_v_style">
          <canvas width="180" height="180"/>
          <img v-bind:src="img19" width="180" height="180"/>
          <img v-bind:src="img20" width="180" height="180"/>
          <img v-bind:src="img21" width="180" height="180"/>
          <canvas width="180" height="180"/>
      </div>
    </div>
    <diV slot="footer">
      <Button type="primary" @click="lastPage()" v-bind:disabled="lastFlag">上一页</Button>
      <Button type="primary" @click="nextPage()" v-bind:disabled="nextFlag">下一页</Button>
    </diV>
  </Modal>
</template>

<script>
import img8001 from '@/assets/game/slot_jackandthebeanstalk/img8001.png'
import img8002 from '@/assets/game/slot_jackandthebeanstalk/img8002.png'
import img8003 from '@/assets/game/slot_jackandthebeanstalk/img8003.png'
import img8004 from '@/assets/game/slot_jackandthebeanstalk/img8004.png'
import img8005 from '@/assets/game/slot_jackandthebeanstalk/img8005.png'
import img8006 from '@/assets/game/slot_jackandthebeanstalk/img8006.png'
import img8007 from '@/assets/game/slot_jackandthebeanstalk/img8007.png'
import img8008 from '@/assets/game/slot_jackandthebeanstalk/img8008.png'
import img8009 from '@/assets/game/slot_jackandthebeanstalk/img8009.png'
import img8010 from '@/assets/game/slot_jackandthebeanstalk/img8010.png'
import img8011 from '@/assets/game/slot_jackandthebeanstalk/img8011.png'
import img8012 from '@/assets/game/slot_jackandthebeanstalk/img8012.png'
export default {
  props: ['recordData', 'showJBModal'],
  data () {
    return {
      curPage: 1,
      imgMap: {},
      curIndex: 0,
      lastFlag: false,
      nextFlag: false,
      img8001,
      img8002,
      img8003,
      img8004,
      img8005,
      img8006,
      img8007,
      img8008,
      img8009,
      img8010,
      img8011,
      img8012,
      img1: '',
      img2: '',
      img3: '',
      img4: '',
      img5: '',
      img6: '',
      img7: '',
      img8: '',
      img9: '',
      img10: '',
      img11: '',
      img12: '',
      img13: '',
      img14: '',
      img15: '',
      img16: '',
      img17: '',
      img18: '',
      img19: '',
      img20: '',
      img21: ''
    }
  },
  created () {
    this.imgMap['8001'] = img8001
    this.imgMap['8002'] = img8002
    this.imgMap['8003'] = img8003
    this.imgMap['8004'] = img8004
    this.imgMap['8005'] = img8005
    this.imgMap['8006'] = img8006
    this.imgMap['8007'] = img8007
    this.imgMap['8008'] = img8008
    this.imgMap['8009'] = img8009
    this.imgMap['8010'] = img8010
    this.imgMap['8011'] = img8011
    this.imgMap['8012'] = img8012
    console.log('this.imgMap:' + this.imgMap)
  },
  methods: {
    lastPage () {
      console.log('lastPage')
      if (this.curPage > 1) {
        this.curPage = this.curPage - 1
        this.onShowData(this.curPage)
      } else {
        this.$Message.info('已经是第一页!')
      }
    },
    nextPage (name) {
      console.log('nextPage')
      if (this.curPage < this.recordData.length - 1) {
        this.curPage = this.curPage + 1
        this.onShowData(this.curPage)
      } else {
        this.$Message.info('已经是最后一页!')
      }
    },
    onCancel () {
      this.curPage = 0
      console.log('onCancel')
      this.$emit('closeJackBeanModal')
    },
    onShowData (index) {
      if (index > this.recordData.length - 1) {
        this.$Message.error('超出数据范围!')
      }
      let _data = this.recordData[index].split(',')
      let _item = _data[0].split('-')
      let _key = _item[0]
      console.log('this.imgMap[_key]:', this.imgMap[_key], '_key:', _key)
      this.img1 = this.imgMap[_key]
      _item = _data[1].split('-')
      _key = '' + _item[0]
      this.img2 = this.imgMap[_key]
      _item = _data[2].split('-')
      _key = '' + _item[0]
      this.img3 = this.imgMap[_key]
      _item = _data[5].split('-')
      _key = '' + _item[0]
      this.img4 = this.imgMap[_key]
      _item = _data[6].split('-')
      _key = '' + _item[0]
      this.img5 = this.imgMap[_key]
      _item = _data[7].split('-')
      _key = '' + _item[0]
      this.img6 = this.imgMap[_key]
      _item = _data[8].split('-')
      _key = '' + _item[0]
      this.img7 = this.imgMap[_key]
      _item = _data[9].split('-')
      this.img8 = this.imgMap[_key]
      _item = _data[10].split('-')
      _key = '' + _item[0]
      this.img9 = this.imgMap[_key]
      _item = _data[11].split('-')
      _key = '' + _item[0]
      this.img10 = this.imgMap[_key]
      _item = _data[12].split('-')
      _key = '' + _item[0]
      this.img11 = this.imgMap[_key]
      _item = _data[13].split('-')
      _key = '' + _item[0]
      this.img12 = this.imgMap[_key]
      _item = _data[14].split('-')
      _key = '' + _item[0]
      this.img13 = this.imgMap[_key]
      _item = _data[15].split('-')
      _key = '' + _item[0]
      this.img14 = this.imgMap[_key]
      _item = _data[16].split('-')
      _key = '' + _item[0]
      this.img15 = this.imgMap[_key]
      _item = _data[17].split('-')
      _key = '' + _item[0]
      this.img16 = this.imgMap[_key]
      _item = _data[18].split('-')
      _key = '' + _item[0]
      this.img17 = this.imgMap[_key]
      _item = _data[19].split('-')
      _key = '' + _item[0]
      this.img18 = this.imgMap[_key]
      _item = _data[20].split('-')
      _key = '' + _item[0]
      this.img19 = this.imgMap[_key]
      _item = _data[21].split('-')
      _key = '' + _item[0]
      this.img20 = this.imgMap[_key]
      _item = _data[22].split('-')
      _key = '' + _item[0]
      this.img21 = this.imgMap[_key]
      this.curIndex = index
      console.log('this.curIndex:', this.curIndex, ' ,this.recordData.length:', this.recordData.length)
      if (this.curIndex === this.recordData.length - 1) {
        this.nextFlag = true
      } else {
        this.nextFlag = false
      }

      if (this.curIndex === 0) {
        this.lastFlag = true
      } else {
        this.lastFlag = false
      }
    }
  },
  computed: {
    getJackBeanShowModal () {
      console.log('getJackBeanShowModal')
      // let curData = this.recordData[0]
      if (this.recordData.length > 0) {
        console.log(this.recordData[0])
        this.onShowData(this.curIndex)
      }
      return this.showJBModal
    },
    setJackBeanShowModal () {
      console.log('setJackBeanShowModal')
    }
  }
}
</script>

<style>
.img_v_style {
  	/*flex布局（作用于容器）*/
  width:200px;
  height:580px;
	display:flex;
  flex-direction:column;
}
.img_h_style {
  	/*flex布局（作用于容器）*/
  width:950px;
  height:580px;
	display:flex;
  flex-direction:row;
}

</style>
